<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> -->
    <title>{$System_namex}</title>
	<style>
		body{ background-color: #f9e3cd;font-size: 16px; }
       .boxs{
        	width:800px;height:600px;
        	position:absolute;
        	left:0;right:0;
        	top:0;bottom:0;
        	margin:auto;
        	border:1px solid black;
            perspective:800px;
            perspective-origin:bottom;
            margin-top: 40%;
        }
        .foot-link ul{
        	list-style-type: none;
        	margin-left: 21%;
        }
        .foot-link ul li{
        	float: left;
        	margin-right: 28%;
        }
        a{
        	text-decoration: none;
        	font-size: 4em;
        }
        .foot-link{
        	position: absolute;
    		bottom: -1%;
    		width: 100%;
        }
	</style>
 <script src="__PUBLIC__/Js/jquery-3.1.1.min.js"></script>
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script>
        window.onload=function(){
        	var boxs=document.querySelector(".boxs");
           // 获取盒子样式的宽高
        	var widths=parseInt(getComputedStyle(boxs,null).width);
        	var heights=parseInt(getComputedStyle(boxs,null).height);
        	var nums=4;
        	var arr=[];
        	// 创建nums个场景(分为nums份)
        	for(var i=0;i<nums;i++){
               var scene=document.createElement("div");
               scene.style.cssText="width:100%;height:"+heights/nums+"px;position:absolute;left:0;top:"+(i*(heights/nums))+"px;border:1px solid hsla(194,100%,50%,0.2)";
               boxs.appendChild(scene);
               //每个场景创建一个盒子
               var box=document.createElement("div");
               box.style.cssText="width:100%;height:100%;position:absolute;left:0;top:0;transform-style:preserve-3d;transition:transform 2s ease "+i*0.3+"s;transform-origin:center center -400px;";
               scene.appendChild(box);
               arr.push(box);
               // 每个盒子创建6个面
               for(var j=0;j<6;j++){
               	  var panel=document.createElement("div");
               	  panel.style.cssText="position:absolute;left:0;top:0;";
               	  if(j==0){ //上
               	  	 panel.style.width=widths+"px";
               	  	 panel.style.height=widths+"px";
               	  	 panel.style.transformOrigin="top";
               	  	 panel.style.transform="rotateX(-90deg)";
               	  }else if(j==1){ //左
                     panel.style.width=widths+"px";
                     panel.style.height=heights/nums+"px";
                     panel.style.transformOrigin="left";
                     panel.style.transform="rotateY(90deg)";
                     panel.style.background="url(__PUBLIC__/Images/s1.png) no-repeat 0 "+(-i*(heights/nums))+"px";
               	  } else if(j==2){ //后
                     panel.style.width=widths+"px";
                     panel.style.height=heights/nums+"px";
                     panel.style.background="url(__PUBLIC__/Images/s5.png) no-repeat 0 "+(-i*(heights/nums))+"px";
               	  } else if(j==3){ //右
                     panel.style.width=widths+"px";
                     panel.style.height=heights/nums+"px";
                     panel.style.transformOrigin="right";
                     panel.style.transform="rotateY(-90deg)";
                     panel.style.background="url(__PUBLIC__/Images/s3.png) no-repeat 0 "+(-i*(heights/nums))+"px";
               	  }else if(j==4){ //下
                     panel.style.width=widths+"px";
               	  	 panel.style.height=widths+"px";
               	  	 panel.style.top=widths-heights/nums+"px";
               	  	 panel.style.transformOrigin="bottom";
               	  	 panel.style.transform="rotateX(90deg)";
               	  } else if(j==5){ //前
                     panel.style.width=widths+"px";
                     panel.style.height=heights/nums+"px";
                     panel.style.transform="translateZ(-800px)";
                     panel.style.background="url(__PUBLIC__/Images/s4.png) no-repeat 0 "+(-i*(heights/nums))+"px";
               	  }

               	  box.appendChild(panel);
               }
             }
          // 自动轮播  
            var init=0;
            var t1=setInterval(function(){
               	  init+=90;
	                for(var i=0;i<arr.length;i++){
	                	arr[i].style.transform="rotateY("+init+"deg)";
	                }
        	  },3000);

          //关闭屏幕轮播停止 打开继续
              $(window).focus(function(){
                  t1=setInterval(function(){
                    init+=90;
                    for(var i=0;i<arr.length;i++){
                      arr[i].style.transform="rotateY("+init+"deg)";
                    }
                  },3000);
              });
              $(window).blur(function(){
                clearInterval(t1);
              });

        }
  </script>
</head>
<body>
<div id="content">
    <div class="top">
        <div class="login">
            <!--登陆链接+logo-->
            <div class="login_img">
              <div>
                	<img src="__PUBLIC__/Images/login_logo.png" alt="" style="width:15%">
               </div>
               <div style="margin-left: 4%;">
                	<a href="__APP__/Public/login" style="font-size: 2.2em;cursor: pointer;text-decoration: none;">登陆</a>
                </div>
                <div class="title" style="margin-top: -20%;margin-left: 24%;">
                	<h3 style="font-size: 3.5em;">智桥积分 商业联盟</h3>
            	</div>
            </div>
                
        </div>
    </div>
</div>
<!--<div style="margin-top: 10%;font-size: 2.1em;text-align: center;"><p>广告啦啦啦啦啦啦啦啦啦</p></div>-->

<div class="boxs">
</div>

<div class="foot-link">
	<ul>
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<div style="clear: both;"></div>
	</ul>
</div>
</body>
</html>
